<!-- 不带图片的歌曲列表 -->
<template>
  <div>
    <div v-for="(item, index) in data" class="songs-list">
      <div class="left">{{ index + 1 }}</div>
      <div class="center" @click="listClick(index)">
        <span>{{ item.name }}</span>
        <span>{{ item.artistName | combine(item.albumName) }}</span>
      </div>
      <div class="right">
        <span>···</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    listClick(index) {
      this.$store.commit('setData',{
        songList: this.data,
        index,
        })
      this.$store.commit('fullScreen')
    },
  },
  filters: {
    combine(artistName, albumName) {
      if (artistName.length == 1) {
        return artistName[0].name + " - " + albumName;
      } else {
        let name = [];
        for (let item of artistName) {
          name.push(item.name);
        }
        return name.join("/") + " - " + albumName;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.songs-list {
  display: flex;
  justify-content: space-between;
  height: 50px;
  padding: 5px 0;
  font-size: $font-size-small;
  .left {
    width: 30px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: $font-size-medium-x;
  }
  .center {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 3px 10px;
    overflow: hidden;
    span {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    span:nth-child(1) {
      font-size: $font-size-medium-x;
    }
  }
  .right {
    width: 30px;
    text-align: center;
    line-height: 50px;
    font-size: $font-size-large-x;
  }
}
</style>